<template>
  <div class="header">
    <div class="flex">
      <a-form layout="inline" class="form">
        <a-form-item label="关键字">
          <a-input v-model:value="search.name" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="getTableData">查询</a-button>
          <a-button @click="onReset" class="btn">重置</a-button>
        </a-form-item>
      </a-form>
      <a-button type="primary" @click="onAddModal">新增管理员</a-button>
    </div>
  </div>
  <a-table 
    :dataSource="dataSource"
    :columns="columns" 
    bordered
    :pagination="false"
    style="margin-top: 20px;"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'createTime'">
        {{proxy.$filters.formatTime(record.createTime)}}
      </template>
      <template v-if="column.dataIndex === 'lastLoginTime'">
        {{proxy.$filters.formatTime(record.lastLoginTime)}}
      </template>
      <template v-else-if="column.dataIndex === 'actions'">
        <a type="link" @click="onEditModal(record)">编辑</a>
        <a type="link" style="margin-left: 10px;" @click="onPasswordModal(record)">修改密码</a>
        <a type="link" style="margin-left: 10px;" @click="onStatus(record)">{{record.status === 1 ? '停用':'启用'}}</a>
      </template>
    </template>
  </a-table >
  <BasicModal @register="register">
    <a-form
      :model="formState"
      ref="formRef"
      :label-col="{ span: 3 }"
      :wrapper-col="{ span: 21 }"
    >
      <a-form-item label="管理员ID" v-if="formState.id">
        {{ formState.id }}   <span style="padding-left: 36px;">当前状态（{{formState.statusDes}}）</span>
      </a-form-item>
      <a-form-item label="用户名">
        <a-input v-model:value="formState.username" />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input v-model:value="formState.mobile" />
      </a-form-item>
      <!-- <a-form-item label="密码" v-if="!formState.id">
        <a-input-password v-model:value="formState.password" />
      </a-form-item> -->
      <a-form-item label="头像">
        <UploadImage v-model:fileList="formState.imgs" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button type="primary" @click="onSubmit">保存</a-button>
      <a-button @click="() => {actionDialog(false)}">取消</a-button>
    </template>
  </BasicModal>
  <BasicModal @register="register1">
    <a-form-item label="密码">
      <a-input-password v-model:value="password" />
    </a-form-item>
    <template #footer>
      <a-button type="primary" @click="onSubmitPassword">保存</a-button>
      <a-button @click="() => {actionDialog1(false)}">取消</a-button>
    </template>
  </BasicModal>
</template>

<script setup>
import BasicModal from '@/components/Modal/BasicModal.vue';
import { useModal } from "@/components/Modal/useModal";
import { adminList,adminStatus,adminEdit,adminPwd } from '@/api/user';
import UploadImage from '@/components/UploadImage/index.vue'
import { reactive, ref, onMounted, computed } from 'vue'
import { getCurrentInstance } from 'vue'
import { message } from 'ant-design-vue';
let currentId = null
const { proxy } = getCurrentInstance()
const [register, { actionDialog, setProps }] = useModal({
  title: "",
  width: 800
});
const [register1, { actionDialog: actionDialog1 }] = useModal({
  title: "重置密码"
});
const statusList = ref([
  { label: '有效', value: 1 },
  { label: '无效', value: -1 },
])
const formState = reactive({
  id: undefined,
  username: undefined,
  imgs: [],
  statusDes: undefined,
  mobile: undefined,
})
onMounted(() => {
  getTableData()
})
const dataSource = ref([])
const password = ref(undefined)
const columns = computed(() => {
  const arr = [
    {
      title: '管理员ID',
      dataIndex: 'id',
      width: 120
    },
    {
      title: '用户名',
      dataIndex: 'username',
      width: 120
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      width: 120
    },
    {
      title: '最近登录IP',
      dataIndex: 'lastLoginIp',
      width: 180
    },
    {
      title: '最近登录时间',
      dataIndex: 'lastLoginTime',
      width: 180
    },
    {
      title: '添加时间',
      dataIndex: 'createTime',
      width: 180
    },
    {
      title: '状态',
      dataIndex: 'statusDes',
      width: 120
    },
    {
      title: '操作',
      dataIndex: 'actions',
      width: 200,
      fixed: 'right'
    }
  ]
  return arr;
})
const search = reactive({
  name: undefined,
})
const onReset = () => {
  search.name = undefined
  getTableData()
}
const getTableData = () => {
  const req = { 
    ...search
  }
  adminList(req).then((res) => {
    dataSource.value = res.data.map(item => ({
      ...item,
      statusDes: statusList.value.find(i => i.value === item.status).label,
    }))
  })
}
const onAddModal = () => {
  formState.id = undefined
  formState.username = undefined
  formState.mobile = undefined
  formState.imgs= []
  formState.statusDes= undefined
  actionDialog()
  setProps({title:"新增管理员"})
}
const onEditModal = (record) => {
  formState.id = record.id
  formState.statusDes = record.statusDes
  formState.username = record.username
  formState.imgs= record.portrait ? [{uid:record.portrait, url: record.portrait, status: 'done'}] : []
  formState.mobile= record.mobile
  actionDialog()
  setProps({title: '编辑管理员'})
}
const onPasswordModal = (record) => {
  currentId = record.id
  password.value = undefined
  actionDialog1()
}
const onSubmit = () => {
  const req = { ...formState, portrait: formState.imgs.length > 0 ? formState.imgs[0].url : '' }
  delete req.imgs
  delete req.statusDes
  adminEdit(req).then(() => {
    message.success('提交成功')
    actionDialog(false)
    getTableData()
  })
}
const onSubmitPassword = () => {
  if (!password.value) {
    message.error('请输入密码')
    return
  }
  adminPwd(currentId, password.value).then(() => {
    message.success('提交成功')
    actionDialog1(false)
    getTableData()
  })
}
const onStatus = (record) => {
  adminStatus({
    id: record.id,
    status: record.status === 1 ? -1 : 1
  }).then(() => {
    message.success('提交成功')
    getTableData()
  })
}
</script>